<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Pong 4 Party</title>
        <script type="text/javascript" src="/static/jquery-1.2.6.min.js"></script>
        <script type="text/javascript">
            function comet_request(url, callback){
                var xmlhttp = new XMLHttpRequest()
                var lastlength = 0
                
                function update(){
                    if(xmlhttp.readyState == 3) {
                       if(xmlhttp.responseText.length == lastlength){
                            return false
                       }
                       var rawtext = xmlhttp.responseText.substr(lastlength)
                       lastlength = xmlhttp.responseText.length
                       
                       var match = rawtext.match(/.*(\[.*?\])$/)
                       if(!match) {
                           return false
                       }
                       text = match[1]
                       try {
                           eval("var data = " + text)
                       }
                       catch(error) {
                           return false
                       }
                       callback(data)
                   }
                }
                setInterval(update, 10)
                xmlhttp.open('GET', url, true)
                xmlhttp.send(null)
            }
        
            $(function(){
                var paddles = {}
                for each(var n in ['top','bottom','left','right']){
                    paddles[n] = $('.'+n).get(0).style
                }
                var $ball = $("#ball").get(0).style
                function setPos(pos){
                    paddles.top.left = pos[0]+'px'
                    paddles.bottom.left = pos[1]+'px'
                    paddles.left.top = pos[2]+'px'
                    paddles.right.top = pos[3]+'px'
                    $ball.left = pos[4]+'px'
                    $ball.top = pos[5]+'px'
                }
                function sendpos(delta){
                    $.get('{% url write id %}', {'dir':delta})
                }
                
                $(window).keydown(function(event){
                    switch (event.keyCode) {
                        case 39: //right
                        case 40: //down
                            sendpos('1')
                            break
                        case 37: //left
                        case 38: //up
                            sendpos('0')
                            break
                    }
				})
                comet_request('{% url read id %}', setPos)
            });
        </script>
        <style type="text/css">
            body{
                background: #555;
            }
            #board{
                position: absolute;
                width: 600px;
                height: 600px;
                background: black;
            }
            .paddle{
                position: absolute;
            }
            .horizontal{
                width: 200px;
                height: 20px; 
            }
            .vertical{
                width: 20px;
                height: 200px;
            }
            .top{
                background: blue;
                top: 0px;
            }
            .bottom{
                background: red;
                bottom: 0px;
            }
            .left{
                background: green;
                left: 0px;
            }
            .right{
                background: yellow;
                right: 0px;
            }
            #ball{
                position: absolute;
                width: 25px;
                height: 25px;
                left: 0px;
                top: 0px;
                background: white;
            }
        </style>
    </head>
    <body>
    <div id="board">
        <div id="paddle1" class="paddle horizontal top"></div>
        <div id="paddle2" class="paddle horizontal bottom"></div>
        <div id="paddle3" class="paddle vertical left"></div>
        <div id="paddle4" class="paddle vertical right"></div>
        <div id="ball"></div>
    </div>
    </body>
</html>